﻿@using Chaine.Models
@model EventModels
@{
    ViewBag.Title = "Events";
    Layout = "~/Views/Shared/_WebEvent.cshtml";
}
@section maincontent{
    <link href="@Url.Content("~/Scripts/NFLightBox/css/nf.lightbox.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@Url.Content("~/js/jquery.pagination.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/NFLightBox/js/NFLightBox.js")"></script>
    <script type="text/javascript">
        $().ready(function () {
            //设置照片的数量
            var PHOTOS_COUNT = $("#event-photos-thumbs dl").length;
            //设置每页显示照片的数量
            var PHOTOS_COUNT_PER_PAGE = 10;


            //首先先显示前10个
            $('#event-photos-thumbs dl:lt(' + PHOTOS_COUNT_PER_PAGE + ')').show();

            //生成Page的DOM
            var pages = Math.ceil(PHOTOS_COUNT / PHOTOS_COUNT_PER_PAGE);
            //first page
            $('#event-photos-thumbs-pager').append('<a href="#"><</a>');
            for (var i = 1; i <= pages; i++) {
                var page = '<a href="#">' + i.toString() + '</a>';
                $('#event-photos-thumbs-pager').append($(page));
            }
            //latest page
            $('#event-photos-thumbs-pager').append('<a href="#">></a>');
            //page
            $('#event-photos-thumbs-pager a').click(function () {
                return false;
            });

            function pageselectCallback(page_index, jq) {
                var max_elem = Math.min((page_index + 1) * PHOTOS_COUNT_PER_PAGE, PHOTOS_COUNT);
                var start = page_index * PHOTOS_COUNT_PER_PAGE;
                var end = start + PHOTOS_COUNT_PER_PAGE;
                //先隐藏
                $('#event-photos-thumbs dl').hide();
                if (start > 0)
                    $('#event-photos-thumbs dl:gt(' + (start - 1) + '):lt(' + PHOTOS_COUNT_PER_PAGE + ')').show();
                if (start == 0)
                    $('#event-photos-thumbs dl:lt(' + PHOTOS_COUNT_PER_PAGE + ')').show();
                return false;
            }

            function getOptionsFromForm() {
                var opt = { callback: pageselectCallback };
                opt.items_per_page = PHOTOS_COUNT_PER_PAGE;
                opt.num_display_entries = 4;
                opt.num_edge_entries = 1;
                // Avoid html injections in this demo
                var htmlspecialchars = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }
                $.each(htmlspecialchars, function (k, v) {
                    if (opt.prev_text != undefined) {
                        opt.prev_text = opt.prev_text.replace(k, v);
                    }
                    if (opt.next_text != undefined) {
                        opt.next_text = opt.next_text.replace(k, v);
                    }
                })
                return opt;
            }

            $("#event-photos-thumbs-pager").pagination(PHOTOS_COUNT, getOptionsFromForm());

            var settings = { containerResizeSpeed: 350 };
            $('#event-photos-thumbs dl a').lightBox(settings);
        });
    </script>
    <div id="event-container">
        <div class="right_title">
            Event Pictures</div>
        <div class="event_left clearfix">
            <div class="event_t clearfix">
            </div>
            @if (Model != null)
            {
                <div class="event_pic">
                    @{
                var poster = string.IsNullOrEmpty(Model.Poster) ? "empty.jpg" : Model.Poster;
                    }
                    <img src="@Url.Content("~/Poster/" + poster)" />
                </div>
                <div class="event_article">
                    <h3>
                        @Model.Title</h3>
                    <p>
                        @Model.StartDateTime.ToString("MMM dd,yyyy", System.Globalization.CultureInfo.CreateSpecificCulture("en-US"))</p>
                    <div class="event-content">
                        @Model.Content
                    </div>
                </div>
            }
        </div>
        <div id="event-photos-thumbs-container" class="event_right clearfix">
            <div id="event-photos-thumbs">
                @{
                    var photos = Chaine.DAO.EventManager.GetPhotosFileName(Model.StartDateTime.ToString("yyyyMMdd"));
                    if (photos != null)
                    {
                        foreach (var item in photos)
                        {
                            var date = Model.StartDateTime.ToString("yyyyMMdd");
                    <dl>
                        <dt><a class="event-photo-thumb" href="@Url.Content("~/events/photo/" + date + "/photos/" + item.ToString())">
                            <img alt="" src="@Url.Content("~/events/photo/" + date + "/thumbs/" + item.ToString())" />
                        </a></dt>
                        <dd>
                        </dd>
                    </dl>
                        }
                    }
                }
            </div>
            <div id="event-photos-thumbs-pager" class="page">
            </div>
        </div>
    </div>
}
